<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			var change = function() {
				var bj = document.getElementById("bj");
				var rl = document.getElementById("rl");
				replaceAAndB(bj, rl);
			}

			function replaceAAndB(a, b) {
				if(a.nodeType != null && b.nodeType != null) {
					a.parentNode.replaceChild(b.cloneNode(true), a);
					b.parentNode.replaceChild(a.cloneNode(true), b);
				} else {
					console.log("参数错误");
				}
			}
		</script>
	</head>

	<body>
		<p id="">你喜欢那个城市</p>
		<ul id="city">
			<li id="bj">北京</li>
			<li>上海</li>
			<li>东京</li>
			<li>首尔</li>
		</ul>

		<br />
		<p>你喜欢哪个单机游戏</p>
		<ul id="game">
			<li id="rl">红警</li>
			<li>实况</li>
			<li>极品飞车</li>
			<li>魔兽</li>

		</ul>
		
		<button onclick="change();">点击交换'北京'和'红警'</button>
	</body>

</html>